<template>
  <!-- 登录页面根容器，用于整体布局 -->
  <div class="login">
    <!-- 登录表单容器，承载登录相关内容 -->
    <div class="login-container">
      <!-- 页面标题，绑定data中的pageTitle变量显示标题文本 -->
      <h2 class="page-title">{{ pageTitle }}</h2>
      <!-- Element UI表单组件：
        - ref="loginForm"：表单引用标识，用于后续调用表单验证等方法
        - :model="loginForm"：表单数据模型绑定，表单元素值与loginForm对象双向绑定
        - :rules="loginRules"：表单验证规则绑定，使用loginRules中的规则进行验证
        - class="login-form custom"：自定义表单样式类 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form custom">
        <!-- 用户名表单项：prop="username"指定对应loginForm中的属性，用于规则验证 -->
        <el-form-item prop="username">
          <!-- 用户名标签，自定义样式 -->
          <label class="form-label">用户名</label>
          <!-- Element UI输入框组件：
            - v-model="loginForm.username"：输入值与loginForm.username双向绑定
            - type="text"：输入框类型为文本
            - auto-complete="off"：关闭浏览器自动填充
            - placeholder="请输入用户名"：输入提示文本 -->
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <!-- 密码表单项：prop="password"指定对应loginForm中的属性，用于规则验证 -->
        <el-form-item prop="password">
          <!-- 密码标签，自定义样式 -->
          <label class="form-label">密码</label>
          <!-- Element UI输入框组件：
            - v-model="loginForm.password"：输入值与loginForm.password双向绑定
            - type="password"：输入框类型为密码，输入内容隐藏
            - auto-complete="off"：关闭浏览器自动填充
            - placeholder="请输入密码"：输入提示文本
            - @keyup.enter.native="handleLogin"：监听回车键，触发登录方法 -->
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="请输入密码"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <!-- 验证码表单项：
          - prop="code"：指定对应loginForm中的属性，用于规则验证
          - v-if="captchaEnabled"：根据captchaEnabled值控制验证码项是否显示 -->
        <el-form-item prop="code" v-if="captchaEnabled">
          <!-- 验证码标签，自定义样式 -->
          <label class="form-label">验证码</label>
          <!-- 验证码行容器，用于横向排列输入框和验证码图片 -->
          <div class="captcha-row">
            <!-- 验证码输入框：
              - v-model="loginForm.code"：输入值与loginForm.code双向绑定
              - auto-complete="off"：关闭浏览器自动填充
              - placeholder="请输入验证码"：输入提示文本
              - @keyup.enter.native="handleLogin"：监听回车键，触发登录方法 -->
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="请输入验证码"
              @keyup.enter.native="handleLogin"
            />
            <!-- 验证码图片：
              - :src="codeUrl"：图片地址绑定codeUrl变量（base64格式）
              - @click="getCode"：点击图片触发重新获取验证码方法
              - class="login-code-img"：自定义验证码图片样式 -->
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
        <!-- 记住密码复选框：
          - v-model="loginForm.rememberMe"：选中状态与loginForm.rememberMe双向绑定
          - class="remember"：自定义复选框样式
          - 文本内容为"记住密码" -->
        <el-checkbox v-model="loginForm.rememberMe" class="remember">记住密码</el-checkbox>
        <!-- 登录按钮表单项：自定义宽度和 marginTop 样式 -->
        <el-form-item style="width:100%; margin-top: 10px;">
          <!-- Element UI按钮组件：
            - :loading="loading"：按钮加载状态绑定loading变量，true时显示加载中
            - size="medium"：按钮尺寸为中等
            - type="primary"：按钮类型为主要按钮（主题色）
            - class="submit-btn"：自定义提交按钮样式
            - @click.native.prevent="handleLogin"：点击事件触发登录方法，prevent阻止默认行为 -->
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            class="submit-btn"
            @click.native.prevent="handleLogin"
          >
            <!-- 按钮文本：未加载时显示"登录"，加载中显示"登录中..." -->
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
          <!-- 立即注册链接容器：
            - style="float: right"：右浮动
            - v-if="register"：根据register值控制是否显示注册链接 -->
          <div style="float: right;" v-if="register">
            <!-- 路由链接：跳转到注册页面，使用router-link实现前端路由跳转 -->
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 登录页底部版权信息容器 -->
    <div class="el-login-footer">
      <!-- 版权文本内容 -->
      <span>Copyright © 2018-2025 驾校管理系统 All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
// 导入登录相关API：获取验证码图片接口
import { getCodeImg } from "@/api/login"
// 导入Cookies操作工具：用于读写Cookie存储用户名密码
import Cookies from "js-cookie"
// 导入加密解密工具：用于密码加密存储和解密回显
import { encrypt, decrypt } from '@/utils/jsencrypt'

// 导出Vue组件配置对象
export default {
  // 组件名称，用于调试和递归组件引用
  name: "Login",
  // 组件数据定义，返回数据对象（确保数据响应式）
  data() {
    return {
      // 页面标题，从环境变量中获取项目标题（通常在.env文件配置）
      title: process.env.VUE_APP_TITLE,
      // 登录页标题文本
      pageTitle: '驾校管理系统管理员登录',
      // 验证码图片地址（base64格式）
      codeUrl: "",
      // 登录表单数据模型：存储用户名、密码、记住密码状态、验证码、验证码唯一标识
      loginForm: {
        username: "刘悦", // 默认用户名
        password: "123456", // 默认密码
        rememberMe: false, // 默认不记住密码
        code: "", // 验证码输入值
        uuid: "" // 验证码唯一标识，用于后端验证
      },
      // 登录表单验证规则：Element UI表单验证格式
      loginRules: {
        // 用户名验证规则：必填，失去焦点时触发，提示文本"请输入您的账号"
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"}
        ],
        // 密码验证规则：必填，失去焦点时触发，提示文本"请输入您的密码"
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"}
        ],
        // 验证码验证规则：必填，值变化时触发，提示文本"请输入验证码"
        code: [{required: true, trigger: "change", message: "请输入验证码"}]
      },
      // 登录按钮加载状态：true表示加载中，false表示正常
      loading: false,
      // 验证码功能开关：控制验证码表单项是否显示
      captchaEnabled: true,
      // 注册功能开关：控制注册链接是否显示
      register: false,
      // 登录后重定向地址：从路由查询参数中获取，默认undefined
      redirect: undefined
    }
  },
  // 组件监听属性：监听路由变化
  watch: {
    // 监听$route（当前路由对象）的变化
    $route: {
      // 路由变化时的处理函数：获取路由查询参数中的redirect值
      handler: function (route) {
        // 如果路由有query参数，且包含redirect，则赋值给this.redirect
        this.redirect = route.query && route.query.redirect
      },
      // immediate: true：组件初始化时立即执行一次handler
      immediate: true
    }
  },
  // 组件创建生命周期钩子：组件实例创建后立即执行
  created() {
    // 初始化时获取验证码图片
    this.getCode()
    // 初始化时从Cookie中读取记住的用户名密码
    this.getCookie()
  },
  // 组件方法定义
  methods: {
    // 获取验证码图片方法
    getCode() {
      // 调用获取验证码API接口
      getCodeImg().then(res => {
        // 设置验证码功能开关：若接口未返回captchaEnabled，默认开启
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        // 如果开启验证码功能
        if (this.captchaEnabled) {
          // 拼接base64图片地址，赋值给codeUrl（用于图片显示）
          this.codeUrl = "data:image/gif;base64," + res.img
          // 存储验证码唯一标识uuid，用于后续登录验证
          this.loginForm.uuid = res.uuid
        }
      })
    },
    // 从Cookie中读取记住的用户名密码方法
    getCookie() {
      // 从Cookie中获取用户名
      const username = Cookies.get("username")
      // 从Cookie中获取加密后的密码
      const password = Cookies.get("password")
      // 从Cookie中获取记住密码状态
      const rememberMe = Cookies.get('rememberMe')
      // 更新loginForm：优先使用Cookie中的值，若无则使用默认值
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password), // 密码解密回显
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) // 转换为布尔值
      }
    },
    // 处理登录方法
    handleLogin() {
      // 调用表单引用的validate方法进行表单验证
      this.$refs.loginForm.validate(valid => {
        // 如果表单验证通过（valid为true）
        if (valid) {
          // 设置登录按钮为加载状态
          this.loading = true
          // 判断是否勾选"记住密码"
          if (this.loginForm.rememberMe) {
            // 记住密码：将用户名、加密后的密码、记住状态存入Cookie，有效期30天
            Cookies.set("username", this.loginForm.username, {expires: 30})
            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30})
            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30})
          } else {
            // 不记住密码：从Cookie中删除用户名、密码、记住状态
            Cookies.remove("username")
            Cookies.remove("password")
            Cookies.remove('rememberMe')
          }
          // 调用Vuex的Login action提交登录请求，传递登录表单数据
          this.$store.dispatch("Login", this.loginForm).then(() => {
            // 登录成功：跳转到重定向地址（若无可重定向地址则跳转到首页）
            this.$router.push({path: this.redirect || "/"}).catch(() => {
            })
          }).catch(() => {
            // 登录失败：重置登录按钮加载状态
            this.loading = false
            // 如果开启验证码功能，重新获取验证码（防止重复使用失效验证码）
            if (this.captchaEnabled) {
              this.getCode()
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
// 登录页面根容器样式：flex布局，水平垂直居中，背景色浅灰
.login {
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  height: 100%; // 占满父容器高度（通常配合html,body高度100%使用）
  background: #f5f5f5; // 背景色
}

// 登录表单容器样式：白色背景、内边距、圆角、阴影、宽度限制
.login-container {
  background: #ffffff; // 白色背景
  padding: 30px; // 内边距30px
  border-radius: 8px; // 圆角8px
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 轻微阴影
  width: 100%; // 宽度100%
  max-width: 400px; // 最大宽度400px，防止过大
}

// 页面标题样式：居中、底部间距、文字颜色、加粗
.page-title {
  text-align: center; // 文本居中
  margin-bottom: 20px; // 底部间距20px
  color: #333; // 文字颜色深灰
  font-weight: 600; // 字体加粗（600为半粗体）
}

// 自定义登录表单样式：针对Element UI输入框的自定义样式
.login-form.custom {
  // 输入框内部样式：边框、圆角、字体大小、内边距
  .el-input input {
    border: 1px solid #ddd; // 浅灰边框
    border-radius: 4px; // 圆角4px
    font-size: 16px; // 字体大小16px
    padding: 10px; // 内边距10px
  }
}

// 表单标签样式：块级显示、底部间距、加粗、文字颜色
.form-label {
  display: block; // 块级元素，独占一行
  margin-bottom: 8px; // 底部间距8px
  font-weight: bold; // 字体加粗
  color: #555; // 文字颜色中灰
}

// 验证码行容器样式：flex布局、垂直居中、元素间距
.captcha-row {
  display: flex; // flex布局
  align-items: center; // 垂直居中
  gap: 10px; // 子元素间距10px
}

// 验证码图片样式：高度、鼠标指针
.login-code-img {
  height: 38px; // 图片高度38px（与输入框高度一致）
  cursor: pointer; // 鼠标悬停显示指针，提示可点击
}

// 提交按钮样式：宽度100%、上下内边距
.submit-btn {
  width: 100%; // 宽度100%，占满父容器
  padding: 12px 0; // 上下内边距12px，左右0
}

// 记住密码复选框样式：底部间距
.remember {
  margin: 0 0 10px 0; // 底部间距10px，其他方向0
}

// 登录页底部版权样式：固定定位、高度、行高、文字样式
.el-login-footer {
  height: 40px; // 高度40px
  line-height: 40px; // 行高40px，实现文本垂直居中
  position: fixed; // 固定定位，始终在底部
  bottom: 0; // 距离底部0
  width: 100%; // 宽度100%
  text-align: center; // 文本居中
  color: #999; // 文字颜色浅灰
  font-family: Arial; // 字体
  font-size: 12px; // 字体大小12px
  letter-spacing: 1px; // 字符间距1px
}
</style>
